<template>
	<div v-if="dataInfo">
		<view class="wrap paddingBottom" v-if="dataInfo">
			<view class="title"> {{ dataInfo.title }} </view>
			<view class="one-bg">
				<view class="sign"> {{ dataInfo.publisher }} </view>

				<view class="time"> {{ $filters.timestampToYMD(dataInfo.releasedAt) }} </view>
				<view class="city"> {{ dataInfo.address }} </view>
			</view>

			<view class="content">
				<uParse :html="$filters.handleHTMLData(dataInfo.content)" />
			</view>
		</view>

		<view class="bottom safe-area" v-if="dataInfo.isVote == 1">
			<view class="num"> {{ dataInfo.voteNum }}票 </view>

			<view class="btn" @click.stop="onVote">
				{{ dataInfo.hasVote == 0 ? "立即投票" : "已投票" }}
			</view>
		</view>
	</div>
</template>

<script>
	import { getInfoDetail } from "@/utils/api.js";
	import uParse from "@/components/uParse/uParse.vue";
	export default {
		components: {
			uParse,
		},
		data() {
			return {
				infoID: "", // 详情ID
				dataInfo: null, // 详情数据
			};
		},
		onLoad(options) {
			this.infoID = options.infoID;
			this.getData();
		},
		methods: {
			/**
			 * 投票
			 */
			onVote() {
				this.$filters.infoVote(this.infoID, () => {
					this.getData();
				});
			},
			/**
			 * 网络请求
			 */
			getData() {
				getInfoDetail(this.infoID).then((res) => {
					this.dataInfo = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
	.wrap {
		width: 100%;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
		overflow: hidden;
		--bottom-height: 120rpx;

		.title {
			font-size: 44rpx;
			font-weight: bold;
			color: #333;
			overflow: hidden;
			line-height: 54rpx;
			line-height: 1;
		}

		.one-bg {
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			align-items: center;
			overflow: hidden;

			.sign {
				color: #576b95;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 1;
			}
			.time {
				margin-left: 24rpx;
				color: #b2b2b2;
				font-size: 30rpx;
				line-height: 1;
			}
			.city {
				margin-left: 22rpx;
				color: #b2b2b2;
				font-size: 30rpx;
				line-height: 1;
			}
		}
		.content {
			margin-top: 70rpx;
			width: 100%;
			overflow: hidden;
			line-height: 44rpx;
		}
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: calc(100% - 80rpx);
		height: 110rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		border-top: 2rpx solid #e5e5e5;
		z-index: 10;
		background-color: white;

		.num {
			color: #999999;
			font-size: 26rpx;
			line-height: 1;
		}
		.btn {
			width: 288rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #ea5520;
			border-radius: 40rpx;
			overflow: hidden;
			color: white;
			font-size: 32rpx;
		}
	}
</style>
